<template>
	<image class="login-img" src="../../static/image/login.png" mode=""></image>
	<view class="top-welcome">欢迎登录~</view>
	<view class="top-introduce">会员用户登录后消费可享折扣，享受更好的服务体验</view>
	<view>
		<uni-forms ref="form" :modelValue="formData" :rules="rules">
			<uni-forms-item name="name">
				<uni-easyinput type="text" v-model="formData.name" placeholder="请输入手机号" style="" />
			</uni-forms-item>

			<uni-forms-item name="email">
				<uni-easyinput class="input" v-model="formData.pwd" type="password" placeholder="请输入密码" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit" class="submit">登录</button>
		<button class="submit">注册</button>
		<text class="text-underbutton">快速登录</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 表单数据
				formData: {
					name: '',
					pwd: ''
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入手机号',
							},
							{
								minLength: 10,
								maxLength: 12,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					pwd: {
						rules: [{
							format: 'pwd',
							errorMessage: '请输入正确格式的密码',
						}]
					}
				}
			}
		},
		methods: {
			submit(){
				console.log("登录方法开始")
				uni.request({
					url:"http://localhost:9999/nbb/User/login",
					method: 'GET',
					header: {
						'Authorization': uni.getStorageSync('Authorization'),
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						phone: this.formData.name,
						pwd: this.formData.pwd
					},
					success: (res) => {
						console.log(res)
						if (res.data.code == 200) {
							console.log("调用login成功");
							//登录成功将信息保存在本地
							uni.setStorageSync('userName', res.data.data.userName)
							uni.setStorageSync('userId', res.data.data.userId)
							uni.setStorageSync('userAvatar', res.data.data.userAvatar)
							//跳转页面到我的页面
							uni.navigateTo({
								url: '/pages/user/my'
							})
						} else {
							console.log("调用login失败");
							console.log(res.data);
						}
					},
					fail() {
						console.log("请求login失败");
					}
				})
			}
		}
	}
</script>

<style>
	.login-img {
		width: 200px;
		height: 150px;
		text-align: center;
		margin-left: 22%;
		padding-top: 30px;
		padding-bottom: 30px;
	}

	.top-welcome {
		color: black;
		font-size: 25px;
		font-weight: bolder;
		margin-bottom: 10px;
	}

	.top-introduce {
		color: #8D908E;
		margin-bottom: 15px;
		font-size: 13px;
	}

	.submit {
		color: white;
		background-color: #1FBA1A;
		margin-bottom: 10px;
	}

	.text-underbutton {
		color: #36C131;
		font-size: 13px;
		margin-top: 25px;
	}
</style>